{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link type="text/css" rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.css' %}">
    <script type="text/javascript" src="{% static 'bootstrap/js/jquery-2.0.2.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.js' %}"></script>
</head>
<body>
<h1>{{ title }}</h1>
<hr>
<h3>列表类型数据渲染</h3>
<ul>
    <li>{{ messages.0 }}</li>
    <li>{{ messages.1 }}</li>
    <li>{{ messages.2 }}</li>
</ul>

<hr>
<h3>字典类型数据渲染</h3>
<ul>
    <li>{{ user.username }}</li>
    <li>{{ user.email }}</li>
</ul>
<hr>
<h3>列表中嵌套字典</h3>
<p>{{ users.0 }}</p>
<ul>
    <li>{{ users.0.username }}</li>
    <li>{{ users.0.email }}</li>
</ul>
<p>{{ users.1 }}</p>
<p>{{ users.2 }}</p>

<hr>
<h3>遍历列表 for</h3>
{% for message in messages %}
    <p>{{ message }}</p>
{% endfor %}


<hr>
<h3>遍历字典 for</h3>
{% for attr,val in user.items %}
    <p>{{ val }}</p>
{% endfor %}

<hr>
<h3>遍历列表嵌套字典 for</h3>
{% for user in users %}
    {% for attr,val in user.items %}
        <p>{{ attr }}:{{ val }}</p>
    {% endfor %}
{% endfor %}

<hr>
<h3>条件渲染</h3>
{% if role == 1 %}
    <p>
        <button type="button" class="btn btn-primary">新增</button>
    </p>
{% endif %}

{% if role == 2 %}
    <p>
        <button type="button" class="btn btn-danger">删除1</button>
    </p>
{% else %}
    <p>
        <button type="button" class="btn btn-danger">删除2</button>
    </p>
{% endif %}

{% if role == 3 %}
    <p>
        <button type="button" class="btn btn-warning">修改</button>
    </p>
{% elif role == 4 %}
    <p>
        <button type="button" class="btn btn-info">查询</button>
    </p>
{% else %}
    <p>
        <button type="button" class="btn btn-info">默认按钮</button>
    </p>
{% endif %}

</body>
</html>